<!-- padding的所有值相对于父元素的宽度 -->

<!-- <body>
  <div class="padding-wrap">
    <div class="padding-test">
      大煞风景啊来得及发来的飞机啊打飞机啊搡地方大煞风景啊来得及发来的飞机啊
    </div>
  </div>
</body>

<style>
  .padding-wrap {
   width: 400px;
}
  .padding-test {
    width: 200px;
    height: 100px;
    padding-top: 25%;
    padding-bottom: 25%;
    border: 1px solid red;
  }
</style> -->


<!-- 实现元素高度为自身宽度的一半 -->


<!doctype html>
<html>
<head>
  <style type="text/css">
    body {
      margin: 0;
    }
    .inner {
      text-align: center;
      background: blue;
      color: #fff;
      padding: 25% 0;
      height: 0;
    }
  </style>
</head>

<body>
  <div class="inner"> A </div>
</body>

</html>

